<template>
    <div class="video-record">
        <el-timeline>
            <el-timeline-item timestamp="今天" placement="top">
                <div class="card" v-for="record in record_info_list"
                     v-if="record.get_updated_time.split(' ')[0] === to_day">
                    <a :href="`/video/${record.video_id}?pk=${record.section_info.id}`">
                        <div class="card-image">
                            <img :src="record.section_info.image" alt="">
                            <span class="total_time">{{record.section_info.total_time}}</span>
                        </div>
                    </a>
                    <div class="card-info">
                        <a :href="`/video/${record.video_id}?pk=${record.section_info.id}`">
                            <span class="card-title">{{record.section_info.name}}</span>
                        </a>
                        <div class="card-play-info">
                            看至{{record.play_time}}秒
                        </div>
                    </div>
                </div>

            </el-timeline-item>
            <el-timeline-item timestamp="昨天" placement="top">
                <div class="card" v-for="record in record_info_list"
                     v-if="record.get_updated_time.split(' ')[0] === yesterday">
                    <a :href="`/video/${record.video_id}?pk=${record.section_info.id}`">
                        <div class="card-image">
                            <img :src="record.section_info.image" alt="">
                            <span class="total_time">{{record.section_info.total_time}}</span>
                        </div>
                    </a>
                    <div class="card-info">
                        <a :href="`/video/${record.video_id}?pk=${record.section_info.id}`">
                            <span class="card-title">{{record.section_info.name}}</span>
                        </a>
                        <div class="card-play-info">
                            看至{{record.play_time}}秒
                        </div>
                    </div>
                </div>
            </el-timeline-item>
            <el-timeline-item timestamp="更早" placement="top">
                <div class="card" v-for="record in record_info_list"
                     v-if="record.get_updated_time.split(' ')[0] === yesterday && record.get_updated_time.split(' ')[0] === to_day">
                    <a :href="`/video/${record.video_id}?pk=${record.section_info.id}`">
                        <div class="card-image">
                            <img :src="record.section_info.image" alt="">
                            <span class="total_time">{{record.section_info.total_time}}</span>
                        </div>
                    </a>
                    <div class="card-info">
                        <a :href="`/video/${record.video_id}?pk=${record.section_info.id}`">
                            <span class="card-title">{{record.section_info.name}}</span>
                        </a>
                        <div class="card-play-info">
                            看至{{record.play_time}}秒
                        </div>
                    </div>
                </div>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
    export default {
        name: "VideoRecord",
        data() {
            return {
                record_info_list: [],    // 观看集剧记录信息列表
                yesterday: "", // 昨天的时间
                to_day: "", // 今天的时间
            }
        },
        methods: {
            get_user_record() {
                this.$axios({
                    url: `${this.$settings.base_url}/user/record`,
                    method: "post",
                    headers: {
                        "AUTHORIZATION": `JWT ${this.$cookies.get("token")}`   // 请求token
                    }
                }).then(response => {
                    this.record_info_list = response.data;
                    console.log(this.record_info_list)

                    // 获取年月日时间
                    var d = new Date();
                    let year = d.getFullYear();
                    let month = d.getMonth() + 1;
                    let day = d.getDate();
                    this.to_day = year + "-" + month + "-" + day;
                    this.yesterday = year + "-" + month + "-" + (day - 1);
                    // console.log(this.to_day)
                    // console.log(this.yesterday)
                    // console.log(this.record_info_list[0].get_updated_time.split(" ")[0])

                }).catch(() => {
                    let _this = this
                    _this.$alert("获取视频播放记录信息有误，请联系客服工作人员", "未知错误", {
                        callback() {
                            _this.$router.push("/")
                        }
                    });
                })
            },
        },
        created() {
            this.get_user_record()
        }
    }
</script>

<style scoped>
    .card {
        /*border: 1px solid #EBEEF5;*/
        color: #303133;
        -webkit-transition: .3s;
        transition: .3s;
        display: inline-block;
        margin-right: 5px;
        /*box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);*/
        border-radius: 4px;
        overflow: hidden;
        width: 239px;
        height: 200px;
    }

    .card-image {
        position: relative;
        width: 239px;
        height: 150px;
    }

    .total_time {
        position: absolute;
        float: right;
        top: 82%;
        right: 3%;
        font-weight: 700;
        font-size: 12px;
        line-height: 20px;
        color: #fff;
        background: rgba(0, 0, 0, .6);
        padding: 0 10px;
        border-radius: 10px;
    }

    .card-info {
        padding-top: 5px;
        padding-left: 5px;
        font-size: 13px;
    }

    .card-title {
        font-size: 14px;
        font-weight: 700;
        color: #333;
    }

    .card-title:hover {
        color: #0d9bff;
    }

    a:hover {
        text-decoration: none;
    }

    img {
        width: 100%;
        height: 100%;
    }
</style>